iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 109 瀏覽

鐵人賽 Modern Web

前端工程師的 Modern Web 實踐之道系列第 17 篇

技術效能最佳化實戰：從首屏載入到執行時效能的全方位最佳化

系列文章: 前端工程師的 Modern Web 實踐之道 - Day 18預計閱讀時間: 12 分鐘難度等級: ⭐⭐⭐⭐☆ 🎯 今日目標在前一篇文章中，我...

useKevin('front-end') ‧ 2025-10-23

0 Like 0 留言 147 瀏覽

鐵人賽 Modern Web

前端工程師的 Modern Web 實踐之道系列第 16 篇

技術前端安全實踐：XSS、CSRF 到 CSP 的現代化防護策略

系列文章: 前端工程師的 Modern Web 實踐之道 - Day 17預計閱讀時間: 12 分鐘難度等級: ⭐⭐⭐⭐☆ 🎯 今日目標在前一篇文章中,我...

useKevin('front-end') ‧ 2025-10-20

0 Like 0 留言 165 瀏覽

鐵人賽 Modern Web

前端工程師的 Modern Web 實踐之道系列第 15 篇

技術測試驅動的現代化開發：單元測試到 E2E 的完整策略

系列文章: 前端工程師的 Modern Web 實踐之道 - Day 15預計閱讀時間: 12 分鐘難度等級: ⭐⭐⭐⭐☆ 🎯 今日目標在前兩週的文章中,...

useKevin('front-end') ‧ 2025-10-15

0 Like 0 留言 76 瀏覽

鐵人賽 Modern Web DAY 30

重溫 React 官方文件回到最初的起點系列第 30 篇

技術 Day 30 - 用 React 的方式去思考

今天是鐵人賽的最後一天，剛好在昨天也介紹完了官方文件的管理 State 篇章。後面還剩逃脫出口出口這個篇章沒介紹完，主要的內容會是對 React 以外的系...

lihsuanh ‧ 2025-10-14

0 Like 0 留言 48 瀏覽

鐵人賽 Modern Web DAY 29

重溫 React 官方文件回到最初的起點系列第 29 篇

技術 Day 29 - 使用 Reducer 跟 Context 進行擴展

延續昨天的介紹，Context 除了透過傳給 Provider 不同的 value 值之外，也可以透過傳入 state 後，用 state 的更新去改變裡面的值...

lihsuanh ‧ 2025-10-13

0 Like 0 留言 46 瀏覽

鐵人賽 Modern Web DAY 28

重溫 React 官方文件回到最初的起點系列第 28 篇

技術 Day 29 - 使用 Context 深度傳遞資料

在前面的篇章：Day 25 - 在 Component 之間共享 State，有介紹 state 可以透過 props 傳下去給其他 Component 使用。...

lihsuanh ‧ 2025-10-12

0 Like 0 留言 40 瀏覽

鐵人賽 Modern Web DAY 27

重溫 React 官方文件回到最初的起點系列第 27 篇

技術 Day 27 - 將 State 邏輯提取到 Reducer

隨著我們開發的程式碼規模變大，有時候在處理陣列的 state 的時候，所需要更新的邏輯也會越來越多，如果通通直接寫在 handler 裡面會讓我們 compon...

lihsuanh ‧ 2025-10-11

0 Like 0 留言 55 瀏覽

鐵人賽 Modern Web DAY 26

重溫 React 官方文件回到最初的起點系列第 26 篇

技術 Day 26 - 保留和重置 State

還記得之前介紹 React 在生成畫面的時候，會照著 render trees 去呈現畫面。而當我們使用判斷式在不同條件下產生不同畫面，就會造成數的改動。這些改...

lihsuanh ‧ 2025-10-10

0 Like 0 留言 61 瀏覽

鐵人賽 Modern Web DAY 25

重溫 React 官方文件回到最初的起點系列第 25 篇

技術 Day 25 - 在 Component 之間共享 State

當我們在 Component 裡面寫 useState 的時候，這就會在 Component 裡面建立一個專屬該 component 的 state 資料，會記...

lihsuanh ‧ 2025-10-09

0 Like 0 留言 152 瀏覽

鐵人賽 Modern Web DAY 0

前端工程師的 Modern Web 實踐之道系列第 14 篇

技術現代化表單處理：從原生 HTML 到智能表單的進化之路

系列文章: 前端工程師的 Modern Web 實踐之道 - Day 14預計閱讀時間: 12 分鐘難度等級: ⭐⭐⭐☆☆ 🎯 今日目標在前一篇文章中,我...

useKevin('front-end') ‧ 2025-10-09

0 Like 0 留言 90 瀏覽

鐵人賽 Modern Web DAY 24

重溫 React 官方文件回到最初的起點系列第 24 篇

技術 Day 24 - 選擇 State 架構

在昨天的篇章，介紹了詳細的 state 變化流程。今天則是要來介紹在使用 state 的時候，我們該如何選擇他的架構該長什麼樣子。昨天已經有先提到一些了，今天會...

lihsuanh ‧ 2025-10-08

0 Like 0 留言 70 瀏覽

鐵人賽 Modern Web DAY 23

重溫 React 官方文件回到最初的起點系列第 23 篇

技術 Day 23 - 用宣告式思考 UI

昨天介紹了在 React 開發的五個思考流程：確認 component 不同的呈現狀態識別哪些會觸發狀態改變用 useState 記憶這些狀態進行操作...

lihsuanh ‧ 2025-10-07

0 Like 0 留言 81 瀏覽

鐵人賽 Modern Web DAY 22

重溫 React 官方文件回到最初的起點系列第 22 篇

技術 Day 22 - 使用 Input Form 介紹 React State 概念

終於把基礎的 state 更新介紹完，接下來的篇章會接著介紹如何管理與設計這些在 component 裡面使用到的 state。今天的文章則是會從輸入表單（I...

lihsuanh ‧ 2025-10-06

0 Like 0 留言 118 瀏覽

鐵人賽 Modern Web DAY 21

重溫 React 官方文件回到最初的起點系列第 21 篇

技術 Day 21 - 更新 State 內的 Array

前兩天介紹了如何更新 state 內的 object，今天則是要來介紹如何更新陣列（Array）。今天的文章參考官方文件的： https://zh-hant...

lihsuanh ‧ 2025-10-05

0 Like 0 留言 78 瀏覽

鐵人賽 Modern Web DAY 20

重溫 React 官方文件回到最初的起點系列第 20 篇

技術 Day 20 - 更新 State 內的 Object Part 2

昨天介紹了如果是 object 型態的 state，在 React 會要怎麼更新。今天要來繼續延伸閱讀，來介紹 React 在他們官網推薦的 library I...

lihsuanh ‧ 2025-10-04

0 Like 0 留言 60 瀏覽

鐵人賽 Modern Web DAY 19

重溫 React 官方文件回到最初的起點系列第 19 篇

技術 Day 19 - 更新 State 內的 Object Part 1

今天繼續介紹 state 的運用，前面的文章的 state 更新都是用數字 number、字串 string、布林值 boolean 等的單一型態（type）...

lihsuanh ‧ 2025-10-03

0 Like 0 留言 55 瀏覽

鐵人賽 Modern Web DAY 17

重溫 React 官方文件回到最初的起點系列第 17 篇

技術 Day 17 - State 當作快照（Snapshot）

昨天在介紹 React 如何把畫面呈現在網站上的三個步驟，今天會再針對 state 更新後重新 render 更新畫面再做更多的延伸介紹。今天的文章參考官方文件...

lihsuanh ‧ 2025-10-01

0 Like 0 留言 130 瀏覽

鐵人賽 Modern Web DAY 0

前端工程師的 Modern Web 實踐之道系列第 13 篇

技術使用者體驗最佳化：從載入效能到互動設計的現代化實踐

系列文章: 前端工程師的 Modern Web 實踐之道 - Day 13預計閱讀時間: 12 分鐘難度等級: ⭐⭐⭐⭐☆ 🎯 今日目標在前一篇文章中,我...

useKevin('front-end') ‧ 2025-10-02

0 Like 0 留言 44 瀏覽

鐵人賽 Modern Web DAY 16

重溫 React 官方文件回到最初的起點系列第 16 篇

技術 Day 16 - Render 和 Commit

Render 是 React 在產生畫面在網頁前，所需要執行的動作，今天會介紹整個 render 的步驟，還有跟他息息相關的 commit。React 會在什麼...

lihsuanh ‧ 2025-09-30

0 Like 0 留言 121 瀏覽

鐵人賽 Modern Web DAY 0

前端工程師的 Modern Web 實踐之道系列第 12 篇

技術響應式設計 2.0：Container Queries 與現代化布局技術

系列文章: 前端工程師的 Modern Web 實踐之道 - Day 12預計閱讀時間: 12 分鐘難度等級: ⭐⭐⭐⭐☆ 🎯 今日目標在前一篇文章中,我...

useKevin('front-end') ‧ 2025-10-01

0 Like 0 留言 92 瀏覽

鐵人賽 Modern Web DAY 0

前端工程師的 Modern Web 實踐之道系列第 11 篇

技術 RESTful 到 GraphQL 的實踐經驗

系列文章: 前端工程師的 Modern Web 實踐之道 - Day 11預計閱讀時間: 12 分鐘難度等級: ⭐⭐⭐⭐☆ 🎯 今日目標在前一篇文章中,我...

useKevin('front-end') ‧ 2025-09-30

0 Like 0 留言 104 瀏覽

鐵人賽 Modern Web DAY 0

前端工程師的 Modern Web 實踐之道系列第 10 篇

技術狀態管理選擇困難症：從 Redux 到 Zustand 的現代化方案

系列文章: 前端工程師的 Modern Web 實踐之道 - Day 10預計閱讀時間: 10 分鐘難度等級: ⭐⭐⭐☆☆ 🎯 今日目標在前一篇文章中，我...

useKevin('front-end') ‧ 2025-09-30

0 Like 0 留言 62 瀏覽

鐵人賽 Modern Web DAY 15

重溫 React 官方文件回到最初的起點系列第 15 篇

技術 Day 15 - 更多關於 useState

昨天對 State 有了初步介紹，之後的官方文件其實也有對 State 直接有一個大章節，會留在後面的篇章。今天想講更多 useState 相關的內容，跟一些...

lihsuanh ‧ 2025-09-29

0 Like 0 留言 37 瀏覽

鐵人賽 Modern Web DAY 14

重溫 React 官方文件回到最初的起點系列第 14 篇

技術 Day 14 - State: Component 的記憶

今天的主題是 React 裡的 State，他會用在我們跟 Component 進行互動時，像是輸入資料（Input）、點擊顯示與隱藏按鈕（Click）或是選取...

lihsuanh ‧ 2025-09-28

0 Like 0 留言 42 瀏覽

鐵人賽 Modern Web DAY 13

重溫 React 官方文件回到最初的起點系列第 13 篇

技術 Day 13 - 事件傳遞（冒泡與捕捉）

今天的文章接下來繼續介紹最後提到的事件的傳遞，這邊的傳遞通常是指假設我們在 Component 裡，觸發的事件可能會根據 Parent 跟 Child 的不同而...

lihsuanh ‧ 2025-09-27

0 Like 0 留言 35 瀏覽

鐵人賽 Modern Web DAY 12

重溫 React 官方文件回到最初的起點系列第 12 篇

技術 Day 12 - 回應 Event

前面幾天的內容，都比較偏向靜態的 JSX 生成，接下來的幾個篇章，會開始介紹怎麼在 React 上增加網站的互動性（像是點擊按鈕，選取選單，輸入資料等），讓我們...

lihsuanh ‧ 2025-09-26

0 Like 0 留言 37 瀏覽

鐵人賽 Modern Web DAY 11

重溫 React 官方文件回到最初的起點系列第 11 篇

技術 Day 11 - 把 UI 想成 Tree

樹（Tree）是一個時常用在處理 UI 與其中的項目關係的一個資料結構。像是在瀏覽器生成 HTML 架構，以及使用 CSS 來完成外觀更動時，都會運用到相對應的...

lihsuanh ‧ 2025-09-25

0 Like 0 留言 45 瀏覽

鐵人賽 Modern Web DAY 10

重溫 React 官方文件回到最初的起點系列第 10 篇

技術 Day 10 - 保持 Component 的 Pure

今天要來介紹一個我們在寫 React Component 很重要的觀念，就是讓 Component 保持純淨（Pure）。前面的文章就有提到在寫 Compone...

lihsuanh ‧ 2025-09-24

0 Like 0 留言 103 瀏覽

鐵人賽 Modern Web DAY 9

不只是登入畫面！一起打造現代化登入系統系列第 9 篇

技術房門與門鎖[ 6 / 6 ]：完整流程 — Axios + JSON Server + Toast

在上一篇，我們加入了「社群登入」，讓使用者不用每次都輸入帳密，就能快速登入。而這一篇會是「房門與門鎖」的最後一個篇章🤩，我們要把整體流程補齊，並加點小巧思，...

阿杰 ‧ 2025-09-23 ‧團隊夢幻公牛

0 Like 0 留言 92 瀏覽

鐵人賽 Modern Web DAY 0

前端工程師的 Modern Web 實踐之道系列第 8 篇

技術元件化思維：從 jQuery 外掛到現代元件的設計哲學

系列文章: 前端工程師的 Modern Web 實踐之道 - Day 8預計閱讀時間: 10 分鐘難度等級: ⭐⭐⭐☆☆ 🎯 今日目標在前一篇文章中，我們...

useKevin('front-end') ‧ 2025-09-24

技術 效能最佳化實戰：從首屏載入到執行時效能的全方位最佳化

技術 前端安全實踐：XSS、CSRF 到 CSP 的現代化防護策略

技術 測試驅動的現代化開發：單元測試到 E2E 的完整策略

技術 Day 30 - 用 React 的方式去思考

技術 Day 29 - 使用 Reducer 跟 Context 進行擴展

技術 Day 29 - 使用 Context 深度傳遞資料

技術 Day 27 - 將 State 邏輯提取到 Reducer

技術 Day 26 - 保留和重置 State

技術 Day 25 - 在 Component 之間共享 State

技術 現代化表單處理：從原生 HTML 到智能表單的進化之路

技術 Day 24 - 選擇 State 架構

技術 Day 23 - 用宣告式思考 UI

技術 Day 22 - 使用 Input Form 介紹 React State 概念

技術 Day 21 - 更新 State 內的 Array

技術 Day 20 - 更新 State 內的 Object Part 2

技術 Day 19 - 更新 State 內的 Object Part 1

技術 Day 17 - State 當作快照（Snapshot）

技術 使用者體驗最佳化：從載入效能到互動設計的現代化實踐

技術 Day 16 - Render 和 Commit

技術 響應式設計 2.0：Container Queries 與現代化布局技術

技術 RESTful 到 GraphQL 的實踐經驗

技術 狀態管理選擇困難症：從 Redux 到 Zustand 的現代化方案

技術 Day 15 - 更多關於 useState

技術 Day 14 - State: Component 的記憶

技術 Day 13 - 事件傳遞（冒泡與捕捉）

技術 Day 12 - 回應 Event

技術 Day 11 - 把 UI 想成 Tree

技術 Day 10 - 保持 Component 的 Pure

技術 房門與門鎖[ 6 / 6 ]：完整流程 — Axios + JSON Server + Toast

技術 元件化思維：從 jQuery 外掛到現代元件的設計哲學

標記使用者

技術效能最佳化實戰：從首屏載入到執行時效能的全方位最佳化

技術前端安全實踐：XSS、CSRF 到 CSP 的現代化防護策略

技術測試驅動的現代化開發：單元測試到 E2E 的完整策略

技術現代化表單處理：從原生 HTML 到智能表單的進化之路

技術使用者體驗最佳化：從載入效能到互動設計的現代化實踐

技術響應式設計 2.0：Container Queries 與現代化布局技術

技術狀態管理選擇困難症：從 Redux 到 Zustand 的現代化方案

技術房門與門鎖[ 6 / 6 ]：完整流程 — Axios + JSON Server + Toast

技術元件化思維：從 jQuery 外掛到現代元件的設計哲學